<!-- 首页 -->
<style scoped rel="stylesheet/scss" lang="scss">
	@import '../../../css/public.scss';
	.HomeCn{
		padding-top: 80px;
		padding-bottom: 120px;
		background-color: #f3f5f8;
	}

	.safeguard{

	}

	.templateCn{
		margin-top: 10px;
		border-top: 1px solid #eeeeee; 
		border-bottom: 1px solid #eeeeee; 
	}
	.orderInformation{
		width: 100%;
		height: 80px;
		line-height: 80px;
		padding:0 30px;
		background-color:#fff;
		@include clearfloat;

		.name{
			float: left;
			font-size: 30px;
			font-weight: bold;
			color: #333;
		}
		#affiche{
			font-size: 26px;
			color: #666;
			font-weight: none;
			margin-left: 30px;
		}
	}

	.serveList{
		width: 100%;
		height: 260px;
		@include clearfloat;
		div.list{
			float: left;
			width: 50%;
			a{
				display: block;
				img{
					width: 100%;
					height: 100%;
				}
			}
			a.link{
				width: 100%;
				height: 100%;
			}
			a.linkTwo{
				width: 100%;
				height: 50%;
			}
		}
		
	}
	ul.serveListTwo{
		width: 100%;
		background-color:#fff;
		padding-top:26px;
		padding-bottom:26px;
		text-align: center;
		@include clearfloat;
		>li{
			width: 25%;
			float: left;
			a{
				display: block;
				width: 100%;
				div.imgc{
					width: 142px;
					height: 142px;
					border-radius: 50%;
					margin: 0 auto;
					>img{
						width: 100%;
						height: 100%;
						border-radius:50px;
					}
				}
				div.title{
					font-size: 24px;
					color: #333333;
					margin-top: 10px;
				}
				div.dist{
					font-size: 18px;
					color: #999999;
					margin-top: 8px;
				}
			}
		}
	}


	div.auntList{
		width: 100%;
		background-color:#fff;
		ul.Nav{
			width: 100%;
			height: 80px;
			border-bottom:1px solid #e1e1e1;

			@include clearfloat;
			>li{
				width: 50%;
				float: left;
				height: 80px;
				line-height:80px;
				text-align: center;
				font-size: 30px;
				color: #333333;
				i{
					font-size: 30px;
					margin-left: 20px;
				}
				i.color1{
					color: #fcb6c6;
				}
				i.color2{
					color: #b2eaed;
				}

			}
			>li.style1{
				color: #fa6d8d;
				border-bottom:2px solid #fa6d8d
			}
			>li.style2{
				color: #b2eaed;
				border-bottom:2px solid #b2eaed
			}

		}

		div.more{
			
			>a{
				display: block;
				font-size: 26px;
				text-align: center;
				line-height: 62px;
				color: #fa7291;
				line-height: 62px;
			}
		}
	}

</style>

<template>
	<section class="HomeCn">
		<home-header-nav></home-header-nav>
		<swiper-cn></swiper-cn>

		<img class="safeguard" src="images/safeguard.jpg">

		<div class="templateCn">
			<div class="orderInformation">
				<div class="name">订购资讯</div>
				<!-- <div class="info"></div> -->
				<marquee id="affiche" align="left" behavior="scroll" bgcolor="#fff" direction="up" height="80" width="540" hspace="50" vspace="200" loop="-1" scrollamount="5" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
					<p>程先生（188****1234）刚订购了XXXXX服务</p>
					<p>程先生（188****1234）刚订购了XXXXX服务</p>
					<p>程先生（188****1234）刚订购了XXXXX服务</p>
				</marquee>
			</div>
		</div>


		<div class="templateCn">
			<div class="serveList">
				<div class="list">
					<a href="#" class="link"><img src="images/maternityMatron.jpg"></a>
				</div>
				<div class="list">
					<a href="#" class="linkTwo"><img src="images/severlist2.jpg"></a>
					<router-link to="/postpartumServer"><img src="images/severlist3.jpg"></router-link>
				</div>
			</div>
		</div>

		<div class="templateCn">
			<ul class="serveListTwo">
				<li>
					<a href="#">
						<div class="imgc"><img src="images/serveListTwo1.png"></div>
						<div class="title">快速报价</div>
						<div class="dist">定制专属方案</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="imgc"><img src="images/serveListTwo2.png"></div>
						<div class="title">月嫂见面会</div>
						<div class="dist">一次面试50位月嫂</div>
					</a>
				</li>
				<li>
					<router-link to="/answerQuestions">
						<div class="imgc"><img src="images/serveListTwo3.png"></div>
						<div class="title">知识答疑</div>
						<div class="dist">月嫂育儿嫂知识</div>
					</router-link>
				</li>
				<li>
					<router-link to="/serviceAssurance">
						<div class="imgc"><img src="images/serveListTwo4.png"></div>
						<div class="title">安全保障</div>
						<div class="dist">我们的安全保障</div>
					</router-link>
				</li>

			</ul>
		</div>

		<div class="templateCn"><video-cn></video-cn></div>

		<div class="templateCn"><swiper-home-bot></swiper-home-bot></div>


		<div class="templateCn">
			<div class="auntList">
				<ul class="Nav">
					<li :class="[auntListNav == 0 ? 'style1' : '']" @click="auntListNav=0">热门月嫂<i class="iconfont color1">&#xe81c;</i></li>
					<li :class="[auntListNav == 1 ? 'style2' : '']" @click="auntListNav=1">热门育儿嫂<i class="iconfont color2">&#xe81c;</i></li>
				</ul>

				<maternity-matronlist></maternity-matronlist>
				<div class="more"><router-link to="/AnutList"> 查看更多</router-link></div>
			</div>
		</div>

		<company-message></company-message>



	</section>
</template>

<script>

	import homeHeaderNav from '../../public/homeHeaderNav';
	import swiperCn from '../../public/swiper';
	import swiperHomeBot from '../../public/swiperHomeBot';
	import videoCn from '../../public/videoCn';
	import companyMessage from '../../public/companyMessage';
	import MaternityMatronlist from '../../public/MaternityMatronlist';




	export default {
		data(){
			return {
				auntListNav: 0,
			}
		},
		components: {
			homeHeaderNav,
			swiperCn,
			videoCn,
			swiperHomeBot,
			companyMessage,
			MaternityMatronlist
		},
		computed: {
	    	// getData(){
	    	// 	return this.$store.getters.getDataVal;
	    	// }
	    	
	    },
	    watch:{
	    	// getData(obj){
	    	// 	var data = obj.custom;
	    	// 	for (var i = 0; i < data.length; i++) {
	    	// 		data[i].createtime = new Date(parseInt(data[i].createtime)*1000).Format("yyyy-MM-dd");
	    	// 		data[i].evaluation = data[i].evaluation || '改用户没有评价！';
	    	// 		data[i].level = parseInt(data[i].level); 	    		
	    	// 	}
	    	// 	this.commentList = data;
	    	// }
	    }

	}
</script>
